<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" th:href="@{/mdui/css/mdui.min.css}">
    <title>云舒NAS</title>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        .fix_control {
            padding: 10px 0;
            background-color: white;
            width: 100%;
            position: fixed;
        }

        #message {
            padding-top: 40px;
        }
    </style>
</head>
<body class="mdui-drawer-body-left mdui-appbar-with-toolbar mdui-theme-primary-indigo mdui-theme-accent-pink">
<header th:replace="common :: header"></header>
<nav th:replace="common :: nav"></nav>
<section class="mdui-container">
    <div class="fix_control">
        <label class="mdui-switch">自动滚动：
            <input type="checkbox" onchange="onAutoScrollChange(this)" checked/>
            <i class="mdui-switch-icon"></i>
        </label>
        <button class="mdui-btn mdui-btn-raised mdui-ripple mdui-color-theme-accent mdui-btn-dense mdui-m-l-1"
                onclick="refresh()">刷新
        </button>
    </div>
    <div id="message"></div>
</section>
<script th:src="@{/mdui/js/mdui.min.js}"></script>
<script th:inline="javascript">
    'use strict';
    let $$ = mdui.JQ;
    let autoScroll = true;

    //判断当前浏览器是否支持WebSocket
    if ('WebSocket' in window) {
        var websocket = new WebSocket("ws://" + window.location.host + "/p");
        console.log("link success")
    } else {
        alert('Not support websocket')
    }

    //连接发生错误的回调方法
    websocket.onerror = function () {
        setMessageInnerHTML("error link to server");
    };

    //连接成功建立的回调方法
    websocket.onopen = function (event) {
        setMessageInnerHTML("success link to server");
    };

    //接收到消息的回调方法
    websocket.onmessage = function (event) {
        setMessageInnerHTML(event.data);
    };

    //连接关闭的回调方法
    websocket.onclose = function () {
        setMessageInnerHTML("server link is closed");
    };

    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    window.onbeforeunload = function () {
        websocket.close();
    };

    //将消息显示在网页上
    function setMessageInnerHTML(innerHTML) {
        let strArray = innerHTML.split("\n");
        for (let s = 0; s < strArray.length; s++) {
            if (strArray[s] !== '') {
                $$('#message').append('<p></p>');
                //let child = $$('#message').children()[$$('#message').children().length - 1];
                $$('#message').children().last().text(strArray[s]);
                if (strArray[s].indexOf("完成转换") !== -1) {
                    setTimeout(refresh, 2000);
                }
            }
        }
        if (autoScroll) {
            window.scrollTo(0, document.body.scrollHeight);
        }
    }

    function refresh() {
        window.location.reload();
    }

    function onAutoScrollChange(that) {
        that.blur();
        autoScroll = that.checked;
    }
</script>
</body>
</html>
